<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪元素  内容生成</title>
		<style>
			h1::before{
				content: 'XX';
			}
			h1::after{
				content: 'SS';
			}
			
			/* --------------------------- */
			
			li::marker{
				content: '0';
			}
			
			li::before{
				content: '子曰：';
				font-weight: bold;
			}
			
			li::after{
				content: '---摘自《论语》';
				font-weight: bold;
				color: red;
			}
			/* --------------------------------- */
			
		/*--------- 选中指定的类选择器   ----------*/
			.a1::after{
				content: '>';
			}
			
	/* --- *---------每次选中相邻的兄弟 ----------------*/
			a+a::before{
				content: '>';
				color: red;
				margin-left: 5px;
			}
			
			
			
		</style>
		
	</head>
	<body>
		<h1>ABC</h1>
		<hr>
		<ul>
			<li>温故而知新 可以为师矣</li>
			<li>见贤思齐焉 见不贤而内自省也</li>
			<li>学而不思则罔 思而不学则殆</li>
			<li>吾日三省吾身 </li>
			
		</ul>
		
		<div>
			<a href="#" class="a1">首页</a>
			<a href="#" class="a1">学习用品</a>
			<a href="#" class="a1">笔记本电脑</a>
			<a href="#">华硕</a>
		</div>
		
		
	</body>
</html>